<template>
  <el-button @click="getTable">加载数据</el-button>
  <el-table v-loading="loading" stripe :data="tableData">
    <el-table-column label="1" prop="name">
      <template v-slot="scope">
        <el-select v-model="scope.row.name">
          <el-option
            v-for="item in opts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="2" prop="age">
      <template v-slot="scope">
        <lazy-component>
          <el-select v-model="scope.row.age">
            <el-option
              v-for="item in opts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </lazy-component>
      </template>
    </el-table-column>
    <el-table-column label="3" prop="tel"></el-table-column>
  </el-table>
</template>

<script setup>
const loading = ref(false);

const tableData = ref([]);

const opts = ref([
  {
    label: '1',
    value: '1',
  },
  {
    label: '2',
    value: '2',
  },
  {
    label: '3',
    value: '3',
  },
  {
    label: '4',
    value: '4',
  },
]);

function getTable() {
  loading.value = true;
    tableData.value = [];
  setTimeout(() => {
    const data = new Array(300)
      .fill(0)
      .map((item, index) => ({ name: index % 5, age: (index % 4) + 1, tel: 'abc' + index }));
    // tableData.value = data;
    tableData.value = [];
    stepRender(data);
    loading.value = false;
  }, 1000);
}

function stepRender(data, startIndex = 0, batch = 30) {
  if (data.length - 1 < startIndex) {
    return;
  }

  const endIndex = Math.min(data.length, startIndex + batch);
  for (let i = startIndex; i < endIndex; i++) {
    tableData.value.push(data[i]);
  }

  requestAnimationFrame(() => {
    stepRender(data, endIndex);
  });
}
</script>
